<template>
	<view>
		<view class="box">
			<view class="list">
				<text class="list-left">姓名:</text>
				<view class="list-input-box">
					<input class="list-input" type="text" placeholder="请输入姓名" v-model="name" placeholder-class="pl"></input>
				</view>
			</view>
			<view class="list">
				<text class="list-left">性别:</text>
				<view class="list-input-box">
					<picker :value="sexIndex" class="picker" :range="sex" @change="changeSex">
						<view class="picker">{{sex[sexIndex]}}</view>
					</picker>
					<image class="right-img" src="/static/images/right.png"></image>
				</view>
			</view>
			<view class="list">
				<text class="list-left">手机:</text>
				<view class="list-input-box">
					<input class="list-input" type="tel" placeholder="请输入手机号" v-model="mobile" placeholder-class="pl"></input>
				</view>
			</view>
			<view class="list" v-if="mobile.length==11&&oldMobile!=mobile">
				<text class="list-left">验证码:</text>
				<view class="list-input-box input-box-height">
					<input class="list-input" v-model="code" type="number" placeholder="请输入验证码" maxlength="6" placeholder-class="pl"></input>
				</view>
				<view v-if="count_down == 0" class="input-btn input-btn-bg flex-cn-cn" @tap="getCode">获取验证码</view>
				<view v-else class="input-btn flex-cn-cn">{{count_down}}s后重试</view>
			</view>
			<view class="list">
				<text class="list-left">生日:</text>
				<view class="list-input-box">
					<picker mode="date" class="picker" :value="birthday" :end="endTime" @change="changeDate">
						<view class="picker">{{birthday}}</view>
					</picker>
					<image class="right-img" src="/static/images/right.png"></image>
				</view>
			</view>
		</view>
		<view class="btn" @tap="save">保存</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				endTime: '',
				sex: ['男', '女'],
				sexIndex: null,
				birthday: '',
				name: '',
				mobile: '',
				oldMobile: '',
				count_down: 0,
				code: ''
			};
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			var y = new Date().getFullYear();
			var m = new Date().getMonth() + 1;
			var d = new Date().getDate();
			this.setData({
				endTime: y + '-' + m + '-' + d
			});
			var that = this;
			getApp().globalData.sendRequest({
				url: '/Vip/getVipData',
				loadTitle: '数据获取中...',
				success: function(res) {
					if (res.status == 1) {
						that.setData({
							birthday: res.data.birthday ? res.data.birthday : '',
							name: res.data.name ? res.data.name : '',
							mobile: res.data.mobile_phone ? res.data.mobile_phone : '',
							oldMobile: res.data.mobile_phone ? res.data.mobile_phone : '',
							sexIndex: res.data.sex == 2 ? 1 : 0
						});
					} else {
						getApp().globalData.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				}
			});
		},

		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload() {
			clearInterval(this.timer)
		},
		methods: {
			/**
			 * 获取验证码
			 */
			getCode() {
				if (!/1[356789]\d{9}/.test(this.mobile)) return uni.showToast({
					title: '请输入正确的手机号',
					icon: 'none'
				});
				getApp().globalData.sendRequest({
					url: '/Vip/getCode',
					loadTitle: '发送中...',
					data: {
						phone: this.mobile
					},
					success: (res) => {
						if (res.status == 1) {
							uni.showToast({
								title: res.msg,
								icon: 'success',
								duration: 1000
							});
							this.count_down = 60;
							this.timer = setInterval(() => {
								this.count_down--;
								if (this.count_down == 0) {
									clearInterval(this.timer);
								}
							}, 1000);
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 1500
							});
						}
					}
				});
			},

			/**
			 * 选择性别
			 */
			changeSex: function(e) {
				this.setData({
					sexIndex: e.detail.value
				});
			},

			/**
			 * 选择生日
			 */
			changeDate: function(e) {
				this.setData({
					birthday: e.detail.value
				});
			},

			/**
			 * 保存
			 */
			save: function() {
				var that = this;
				var name = this.name;
				var mobile = this.mobile;
				var birthday = this.birthday;
				var sexIndex = this.sexIndex;

				if (name == '' || name.trim() == '') {
					getApp().globalData.showToast({
						title: '请输入姓名',
						icon: 'none'
					});
					return;
				}

				if (!/1[356789]\d{9}/.test(mobile)) {
					getApp().globalData.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					});
					return;
				}

				var code = '';

				if (mobile != that.oldMobile && (that.code == '' || that.code.length < 6)) {
					getApp().globalData.showToast({
						title: '请输入验证码',
						icon: 'none'
					});
					return;
				}

				code = that.code;

				if (birthday == '' || birthday.trim() == '') {
					getApp().globalData.showToast({
						title: '请选择生日',
						icon: 'none'
					});
					return;
				}

				if (sexIndex === '') {
					getApp().globalData.showToast({
						title: '请输入性别',
						icon: 'none'
					});
					return;
				}

				getApp().globalData.sendRequest({
					url: '/Vip/editVipData',
					loadTitle: '提交中...',
					data: {
						name: name,
						mobile: mobile,
						birthday: birthday,
						sex: sexIndex == 1 ? 2 : 1,
						code: code
					},
					success: function(res) {
						if (res.status == 1) {
							getApp().globalData.showToast({
								title: res.msg
							});
							setTimeout(function() {
								uni.navigateBack({
									delta: 1
								});
							}, 1000);
						} else {
							getApp().globalData.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
					}
				});
			}
		}
	};
</script>
<style>
	@import "./vipInfo.css";
</style>
